<template>
	<div class="w750 white-bg">
		<header>
			<div class="header-box">
				<div class="header-back" @click="goback">
					<span class="back-img"><img src="../../assets/images/back.png" alt=""/></span>
				</div>
				<div class="header-search"><p class="ser-txt">绑定手机号</p></div>
				<div class="header-mes"></div>
			</div>
		</header>
		<!-- 修改资料 -->
		<div class="modify">
			<!-- 绑定手机号  -->
			<div>
				<div>
					<div class="item"><input type="text" class="item-input" placeholder="请输入手机号" v-model="phone" /></div>
					<div class="item">
						<input type="text" class="item-input" placeholder="请填写短信验证码" v-model="code" maxlength="6" />
						<getvali-date codeType="bindPhone" :codeMobile="phone" :class="'send-code'" />
					</div>
					<div class="b-btn" :class="themes.theme" @click="success"><span class="btn-r">确定</span></div>
				</div>
			</div>
			<!-- /修改手机号 -->
		</div>
		<!-- /修改资料 -->
	</div>
</template>

<script>
import getvaliDate from "components/getvaliDate/getvaliDate";
import { bindUserMobile } from "api/my";
import { tokenManage } from "utils/Cache";
import formCheck from 'utils/formCheck';
import { mapState } from "vuex";
export default {
	data() {
		return {
			phone: '',
			code: ''
		};
	},
	mounted() {
		let that = this;
	},

	methods: {
		//返回
		goback() {
			this.$router.replace('/login');
		},

		success() {
			let phone = this.phone
            let code = this.code
			let countryCode = "+86"

			let errorMsg =  formCheck.isNonEmpty(this.phone, '请输入手机号') ||  
							formCheck.phoneRight(this.phone, '请输入正确的手机号码') || 
							formCheck.isNonEmpty(this.code, '请输入验证码')  
			
			if (errorMsg) {
				this.$toast(errorMsg)
				return
			}
			

            let params = {
                phoneNumber: phone,
                countryCode: countryCode,
                code: code
            };
			

            bindUserMobile(params).then(res => {
                if (res.status == 1) {
					this.$toast({ message: "恭喜您,绑定成功!" });
					//从什么页面过来的就跳回什么页面去
					setTimeout(() => {
						this.$router.replace(this.$route.query.redirect);
					})
				} else {
					this.$toast({ message: res.msg });
				}
            });
		},
		
	},
	computed: {
		...mapState(["themes"])
	},
	components: {
		getvaliDate
	}
};
</script>

<style src="@/assets/css/account.css" scoped></style>